import React, { useState } from 'react';
import { Modal, Card } from 'antd';
// 1. 导入CSS Modules文件（文件名必须以 .module.css 结尾）
import styles from './index.module.css';

// 客户列表模拟数据
const clientListData = [
  {
    id: 1,
    name: '李明',
    phone: '13812345678',
    lastVisitDate: '2023-06-15',
    lastVisitTime: '09:30',
    gender: '男',
    age: '35岁',
  },
  {
    id: 2,
    name: '王芳',
    phone: '13756786789',
    lastVisitDate: '2023-06-14',
    lastVisitTime: '16:45',
    gender: '女',
    age: '27岁',
  }
];

const Client = () => {
  const [visible, setVisible] = useState(false);
  const [selectedClient, setSelectedClient] = useState(null);

  // 获取客户姓氏
  const getLastName = (fullName) => fullName.charAt(0);

  // 获取客户尊称
  const getHonorificName = (fullName, gender) => {
    const lastName = fullName.charAt(0);
    return `${lastName}${gender === '男' ? '先生' : '女士'}`;
  };

  // 打开/关闭弹窗方法
  const handleViewClient = (client) => {
    setSelectedClient(client);
    setVisible(true);
  };

  const handleCloseModal = () => {
    setVisible(false);
    setSelectedClient(null);
  };

  return (
    <div className={styles.client}>
      <div className={styles["client-management"]}>
        <main className={styles["client-main"]}>
          <div className={styles["page-header"]}>
            <div>
              <h2 className={styles["page-title"]}>客户管理</h2>
              <p className={styles["page-description"]}>管理客户信息、服务记录和偏好设置</p>
            </div>
          </div>

          <section className={styles["client-list-section"]}>
            <div className={styles["client-cards"]}>
              {clientListData.map(client => (
                <Card
                  key={client.id}
                  className={styles["client-card"]}
                  onClick={() => handleViewClient(client)}
                >
                  <div className={styles["client-card-content"]}>
                    <div className={styles["text-avatar"]}>
                      {getLastName(client.name)}
                    </div>
                    <div className={styles["client-card-info"]}>
                      <div className={styles["client-name"]}>
                        {getHonorificName(client.name, client.gender)}
                      </div>
                      <div className={styles["client-phone"]}>
                        <i className="fa fa-phone mr-1"></i>{client.phone}
                      </div>
                      <div className={styles["last-visit"]}>
                        <i className="fa fa-clock-o mr-1"></i>
                        {client.lastVisitDate} {client.lastVisitTime}
                      </div>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          </section>
        </main>
      </div>

      {/* 客户详情弹窗 */}
      <Modal
        title="客户详情"
        open={visible}
        onCancel={handleCloseModal}
        footer={null}
        className={styles["responsive-modal"]}
      >
        {selectedClient && (
          <div className={styles["detail-content-simple"]}>
            <div className={styles["client-header"]}>
              <div className={styles["large-text-avatar"]}>
                {getLastName(selectedClient.name)}
              </div>
              <div className={styles["client-header-info"]}>
                <h3>{getHonorificName(selectedClient.name, selectedClient.gender)}</h3>
                <p><i className="fa fa-phone mr-1"></i>{selectedClient.phone}</p>
              </div>
            </div>
            
            <div className={styles["info-card"]}>
              <h4 className={styles["info-card-title"]}>基本信息</h4>
              <div className={styles["info-list"]}>
                <div className={styles["info-item"]}>
                  <span className={styles["info-label"]}>姓名</span>
                  <span className={styles["info-value"]}>{selectedClient.name}</span>
                </div>
                <div className={styles["info-item"]}>
                  <span className={styles["info-label"]}>性别</span>
                  <span className={styles["info-value"]}>{selectedClient.gender}</span>
                </div>
                <div className={styles["info-item"]}>
                  <span className={styles["info-label"]}>年龄</span>
                  <span className={styles["info-value"]}>{selectedClient.age}</span>
                </div>
                <div className={styles["info-item"]}>
                  <span className={styles["info-label"]}>上次访问</span>
                  <span className={styles["info-value"]}>
                    {selectedClient.lastVisitDate} {selectedClient.lastVisitTime}
                  </span>
                </div>
              </div>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
};

export default Client;
    